<template>
	<view class="container">
		<view class="piece">
		</view>
		<view class="header">
			<view class="header-top">
				<view class="header-top-avatar">
					<image src="../../static/avther.png" mode="aspectFill"></image>
				</view>
				<view class="header-top-title">
					<view>{{ userInfo.mobile || '-' }}</view>
					<view>会员剩余{{ userInfo.number_times || 0 }}次</view>
				</view>
			</view>
			<view class="header-payTitle">
				会员充值
				<!-- <text class="header-payTitle-text">(微信支付)</text> -->
			</view>
			<view>
				<view class="header-card">
					<view class="header-card-item" v-for="(item, index) of packageContentList" :key="index"
					    @click="handlerChange(item, index)"
						:class="{'header-card-item-active': currentMode === index}">

						<view class="header-card-item-money">
							<view class="header-card-item-block" :class="{'garden': currentMode !== index}">
								{{ item.goods_name }}
							</view>
							<text style="font-size: 24rpx;">&yen;</text>
							{{ item.price }}
						</view>
						<view class="header-card-item-pre">{{ item.introduction }}</view>
					</view>
				</view>
				<view style="padding: 0 34rpx;">
					<u-parse :content="setMeal.goods_content"></u-parse>
				</view>
			</view>
		</view>

		<view class="footer" @click="orderCreate">
			确认支付
		</view>
		<Tabbar cureentPage='member'></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '@/components/common/Tabbar.vue'
	import request from "../../api/request";
	export default {
		data() {
			return {
				token: null,
				packageContentList: [],
				currentMode: 0,
				setMeal: null,
				openid: null,
				userInfo: null		
			}
		},
		components: {
			Tabbar
		},
		onLoad() {
			this.token = uni.getStorageSync('token')
			this.openid = uni.getStorageSync('openid');
			this.getPackageContent()
		},
		onShow() {
		  this.getUserInfo()
		},
		methods: {
			handlerChange(val, index){
			  this.currentMode = index
			  this.setMeal = val
			},
			getUserInfo(){
				const that = this
				request({
					url: '/kx/index/getUserInfo',
					 data: { token: that.token },
					successCb: (res) => {
						this.userInfo = res.data.data
						uni.setStorageSync('userInfo',JSON.stringify(res.data.data))
					},
				});
			},
			orderCreate(){
			  const that = this
			  uni.showModal({
			  	title: '温馨提示',
				content: `是否确认支付充值金额${this.setMeal.price}元`,
				success({confirm}) {
					if(confirm){
					  uni.showLoading({
					  	title: '加载中..'
					  })
					  request({
					  		url: '/kx/order/formal_pay',
					  		data:{
					  			token:that.token,
					  			goods_id:that.setMeal.goods_id,
					  			openid:that.openid,
					  		},
					  		successCb: (res) => {
					  			// console.log(res)
					  			let orderInfo = res.data.credential
								uni.hideLoading()
					  			uni.requestPayment({
					  			    provider: "wxpay", 
					  				appid: orderInfo.appId,  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
					  				nonceStr: orderInfo.nonceStr, // 随机字符串
					  				package: orderInfo.package,        // 固定值
					  				prepayId: orderInfo.prepayId, // 统一下单订单号 
					  				timeStamp: orderInfo.timeStamp,        // 时间戳（单位：秒）
					  				signType: orderInfo.signType, // 签名，这里用的 MD5/RSA 签名
					  				paySign:orderInfo.paySign,
					  				success(res) {
					  					console.log('支付成功',res);
					  					uni.$u.toast('支付成功')
					  					that.getUserInfo()
					  				},
					  			    fail(e) {
					  					console.log('支付失败',e);
					  					uni.$u.toast('支付失败')
					  				}
					  			})
					  		},
					  	});	
					}
				}
			  })
			},
			getPackageContent() {
				uni.showLoading({
					title: '加载中...'
				})
				request({
					url: '/kx/device/getPackageContent',
					data: {
						token: this.token,
					},
					successCb: (res) => {
						this.packageContentList = res.data;
						this.setMeal = this.packageContentList[0]
						uni.hideLoading()
					},
					failCb: (err) => {
						console.log(err)
						uni.$u.toast('系统繁忙')
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #F3F3F3;
		width: 100%;
		padding-bottom:150rpx;
	}

	.piece {
		width: 100%;
		height: 120rpx;
		background: #F14A4A;
	}

	.header {
		width: 100%;
		background: #fff;
		border-radius: 40rpx;
		margin-top: -30rpx;
		margin-bottom: 24rpx;
		&-top {
			display: flex;
			align-items: center;
			padding: 34rpx;

			&-avatar {
				width: 108rpx;
				height: 108rpx;
				object-fit: cover;

				image {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

			&-title {
				margin-left: 24rpx;

				view {
					&:nth-child(1) {
						color: #3D3D3D;
						font-size: 28rpx;
					}

					&:nth-child(2) {
						color: #8D8D8D;
						font-size: 24rpx;
						line-height: 2;
					}
				}
			}
		}

		&-payTitle {
			color: #3D3D3D;
			font-size: 36rpx;
			font-weight: 700;
			padding-left: 34rpx;

			&-text {
				color: #3D3D3D;
				font-size: 24rpx;
			}
		}

		&-card {
			display: flex;
			padding: 20rpx 22rpx;

			&-item {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				width: 220rpx;
				height: 240rpx;
				margin: 0 12rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.3);
				border-radius: 20rpx;

				&-active {
					width: 210rpx;
					height: 230rpx;
					border: 8rpx solid #F14A4A;
				}

				&-block {
					position: absolute;
					top: 0;
					left: 0;
					width: 150rpx;
					height: 50rpx;
					background: #F14A4A;
					border-bottom-right-radius: 30rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 50rpx;
					text-align: center;
				}

				&-money {
					color: #3D3D3D;
					font-size: 36rpx;
					font-weight: 700;
				}

				&-pre {
					font-size: 24rpx;
					color: #3D3D3D;
					line-height: 2;
				}
			}
		}
	}

	.footer {
		width: 690rpx;
		height: 88rpx;
		border-radius: 50rpx;
		background: #F14A4A;
		text-align: center;
		line-height: 88rpx;
		color: #fff;
		margin: 0 auto;
	}

	.garden {
		border-top-left-radius: 20rpx !important;
	}
</style>